<nz-layout class="app-layout">
  <nz-sider class="menu-sidebar"
            nzCollapsible
            nzWidth="200px"
            nzBreakpoint="md"
            [(nzCollapsed)]="isCollapsed"
            [nzTrigger]="null">
    <div class="sidebar-logo">
       <img src="./assets/imgs/xmall (7).svg" alt="logo">
        <h1>后台管理系统</h1>
    </div>
    <ul nz-menu nzTheme="dark" nzMode="inline" [nzInlineCollapsed]="isCollapsed">
      <!--<li nz-submenu nzOpen nzTitle="Dashboard" nzIcon="dashboard">
        <ul>
          <li nz-menu-item nzMatchRouter>
            <a routerLink="/sys/welcome">Welcome</a>
          </li>
        </ul>
      </li>-->
      <li nz-submenu nzOpen nzTitle="系统管理" nzIcon="setting">
        <ul>
          <li nz-menu-item nzMatchRouter>
            <a routerLink="/page/system/user">用户管理</a>
          </li>
          <li nz-menu-item nzMatchRouter>
            <a routerLink="/page/system/role">角色管理</a>role·
          </li>
          <li nz-menu-item nzMatchRouter>
            <a routerLink="/page/system/dept">部门管理</a>
          </li>
        </ul>
      </li>
    </ul>
  </nz-sider>
  <nz-layout>
    <nz-header>
      <div class="app-header">
        <span class="header-trigger" (click)="isCollapsed = !isCollapsed">
            <i class="trigger"
               nz-icon
               [nzType]="isCollapsed ? 'menu-unfold' : 'menu-fold'"
            ></i>
        </span>

        <span style="float: right; margin-right: 16px;">
          <!--<ul nz-menu nzMode="horizontal">
             <li nz-submenu > 用户
              <ul nz-menu-group>
                <li nz-menu-item>个人信息</li>
                <li nz-menu-item>安全退出</li>
              </ul>

            </li>
          </ul>-->
          <ul nz-menu nzMode="horizontal">
             <li nz-submenu nzTitle="用户" nzIcon="user">
              <ul>
                <li nz-menu-item>个人信息</li>
                <li nz-menu-item>安全退出</li>
              </ul>
            </li>
          </ul>
        </span>
      </div>
    </nz-header>

    <nz-content style="height: 40px;margin: 0px;flex: none">
      <nz-tabset [nzType]="'card'"
                 [nzTabPosition]="nzTabPosition"
                 [(nzSelectedIndex)]="selectedIndex"

      >
        <nz-tab
          *ngFor="let tab of tabs"
          [nzTitle]="titleTemplate"
        >
          <ng-template  #titleTemplate>
            <a  (click)="gotoPage(tab.url)" style="width: 100px;">{{ tab.name }}</a>
            <a (click)="closeTab(tab)" *ngIf="tab.closeIcon"><i  nz-icon nzType="close"  class="ant-tabs-close-x"></i></a>
          </ng-template>
        </nz-tab>

        <!--<nz-tab *ngFor="let tab of tabs">
          <a nz-tab-link [routerLink]="tab.url" >{{ tab.name }} </a>
          <i *ngIf="tab.closeIcon" nz-icon nzType="close" (click)="closeTab(tab)" class="ant-tabs-close-x"></i>
        </nz-tab>-->
      </nz-tabset>
    </nz-content>

    <div style="height: calc(100% - 122px);max-height: calc(100% - 122px);overflow: auto;">
    <nz-content >
      <div class="inner-content">
        <router-outlet></router-outlet>
      </div>
    </nz-content>
    </div>
    <nz-footer class="_ngFooter"><div class="ng-right">© 2019 Xmall Copyright </div></nz-footer>
  </nz-layout>
</nz-layout>
